<script setup lang="ts">
import { Avatar } from "@element-plus/icons-vue";
</script>

<template>
  <div class="el-container">
    <el-card class="el-card-container chat-card">
      <el-row>
        <el-col style="height: 600px;overflow: auto;" :span="6" class="el-card">
          <el-col v-for="item in 8" :class="`user-list el-table-v2__row ${ 1 == item ? 'select' : ''}`">
            <el-col class="el-table-column--selection " :span="8">
              <el-avatar :size="40" :src="'https://q1.itc.cn/q_70/images03/20240320/fcf023d835c54f78bac6c7efc98fbb4c.jpeg'"></el-avatar>
            </el-col>
            <el-col :span="8">username</el-col>
            <el-col :span="8"><el-tag type="success">管理员</el-tag></el-col>
          </el-col>
        </el-col>
        <el-col :span="16" style="margin-left: 10px">
          <el-col style="height: 400px;" class="el-card">
            <div v-for="item in 3" style="padding: 10px; height: 60px; line-height: 60px;width: 100%;">
              <el-avatar :size="40" :src="'https://q1.itc.cn/q_70/images03/20240320/fcf023d835c54f78bac6c7efc98fbb4c.jpeg'"></el-avatar>
              <span class="message-bubble left">在吗？</span>
            </div>
          </el-col>
          <el-row style="height: 200px;padding: 10px;" class="el-card">
            <el-col :span="20">
              <el-input type="textarea" autosize></el-input>
            </el-col>
            <el-col :span="3" :offset="1">
              <el-button type="primary">发送</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.chat-card{
  width: 100%;
}
.user-list{
  height: 60px;
  overflow: auto;
  padding: 5px;
  border-bottom: rgba(144, 147, 153, 0.41) 1px solid;
}
.select{
  background-color: #93d5dc;
}
/* 公共样式 */
.message-bubble {
  position: relative;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1;
  word-wrap: break-word;
  max-width: 75%; /* 或自定义最大宽度 */
}

/* 左对齐消息气泡 */
.message-bubble.left {
  background-color: #e6f7ff; /* 蓝色背景 */
  border-radius: 8px 8px 8px 0;
  margin-left: 10px;
}

.message-bubble.left::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 8px 9px 0;
  border-color: transparent #e6f7ff transparent transparent;
}

/* 右对齐消息气泡 */
.message-bubble.right {
  background-color: #f5f5f5; /* 白色背景 */
  color: #333;
  border-radius: 8px 0 8px 8px;
  float: right;
}

.message-bubble.right::before {
  content: "";
  position: absolute;
  top: 10px;
  right: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 8px;
  border-color: transparent transparent transparent #f5f5f5;
}

/* 阴影效果（可选） */
//.message-bubble {
//  box-shadow: 0 2px .png rgba(0, 0, 0, 0.1);
//}

/* 动画效果（可选） */
.message-bubble {
  animation: fadeIn 1000ms ease-in-out;
}

@keyframes fadeIn {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
